<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="//unpkg.com/layui@2.9.0/dist/css/layui.css">
    <script src="//unpkg.com/layui@2.9.0/dist/layui.js" charset="utf-8"></script>

</head>
<style>
    .main-div {
        width: 100%;
        position: absolute;
        top: 60px;
        height: calc(100% - 60px);
    }

    .main-iframe {
        width: 100%;
        border: 0;
        height: calc(100% - 5px);
    }
</style>
<body>

<ul class="layui-nav">
    <li class="layui-nav-item layui-this"><a href="javascript:switchMain(0);">系统设置</a></li>

    <li th:if="${vo.domain != null && !#strings.isEmpty(vo.dashboardId) && !#strings.isEmpty(vo.appId)}"
        class="layui-nav-item">
        <a href="javascript:;">仪表板预览</a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:switchMain(1);">div嵌入</a></dd>
            <dd><a href="javascript:switchMain(11);">iframe嵌入</a></dd>
        </dl>
    </li>
    <li th:if="${vo.domain != null && !#strings.isEmpty(vo.screenId) && !#strings.isEmpty(vo.appId)}"
        class="layui-nav-item">
        <a href="javascript:;">大屏预览</a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:switchMain(2);">div嵌入</a></dd>
            <dd><a href="javascript:switchMain(12);">iframe嵌入</a></dd>
        </dl>
    </li>
    <li th:if="${vo.domain != null && !#strings.isEmpty(vo.dashboardId) && !#strings.isEmpty(vo.appId)}"
        class="layui-nav-item">
        <a href="javascript:;">仪表板编辑</a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:switchMain(3);">div嵌入</a></dd>
            <dd><a href="javascript:switchMain(13);">iframe嵌入</a></dd>
        </dl>
    </li>
    <li th:if="${vo.domain != null && !#strings.isEmpty(vo.screenId) && !#strings.isEmpty(vo.appId)}"
        class="layui-nav-item">
        <a href="javascript:;">大屏编辑</a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:switchMain(4);">div嵌入</a></dd>
            <dd><a href="javascript:switchMain(14);">iframe嵌入</a></dd>
        </dl>
    </li>
    <li th:if="${vo.domain != null && !#strings.isEmpty(vo.viewResourceId) && !#strings.isEmpty(vo.viewId) && !#strings.isEmpty(vo.appId)}"
        class="layui-nav-item">
        <a href="javascript:;">视图预览</a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:switchMain(5);">div嵌入</a></dd>
            <dd><a href="javascript:switchMain(6);">iframe嵌入</a></dd>
        </dl>
    </li>

    <li th:if="${vo.domain != null && !#strings.isEmpty(vo.appId)}" class="layui-nav-item">
        <a href="javascript:;">数据源树</a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:switchMain(7);">div嵌入</a></dd>
            <dd><a href="javascript:switchMain(17);">iframe嵌入</a></dd>
        </dl>
    </li>
    <li th:if="${vo.domain != null && !#strings.isEmpty(vo.appId)}" class="layui-nav-item">
        <a href="javascript:;">数据集树</a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:switchMain(8);">div嵌入</a></dd>
            <dd><a href="javascript:switchMain(18);">iframe嵌入</a></dd>
        </dl>
    </li>
    <li th:if="${vo.domain != null && !#strings.isEmpty(vo.appId)}" class="layui-nav-item">
        <a href="javascript:;">仪表板树</a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:switchMain(9);">div嵌入</a></dd>
            <dd><a href="javascript:switchMain(19);">iframe嵌入</a></dd>
        </dl>
    </li>
    <li th:if="${vo.domain != null && !#strings.isEmpty(vo.appId)}" class="layui-nav-item">
        <a href="javascript:;">大屏树</a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:switchMain(10);">div嵌入</a></dd>
            <dd><a href="javascript:switchMain(20);">iframe嵌入</a></dd>
        </dl>
    </li>
    <li th:if="${vo.domain != null && !#strings.isEmpty(vo.appId)}" class="layui-nav-item">
        <a href="javascript:;">数据填报树</a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:switchMain(21);">div嵌入</a></dd>
            <dd><a href="javascript:switchMain(22);">iframe嵌入</a></dd>
        </dl>
    </li>
    <li th:if="${vo.domain != null && !#strings.isEmpty(vo.appId)}" class="layui-nav-item">
        <a href="javascript:;">我的填报</a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:switchMain(23);">div嵌入</a></dd>
            <dd><a href="javascript:switchMain(24);">iframe嵌入</a></dd>
        </dl>
    </li>
    <li th:if="${vo.domain != null && !#strings.isEmpty(vo.appId) && !#strings.isEmpty(vo.dfId)}" class="layui-nav-item">
        <a href="javascript:;">数据填报编辑</a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:switchMain(25);">div嵌入</a></dd>
            <dd><a href="javascript:switchMain(26);">iframe嵌入</a></dd>
        </dl>
    </li>
    <li th:if="${vo.domain != null && !#strings.isEmpty(vo.appId)}" class="layui-nav-item">
        <a href="javascript:;">Copilot</a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:switchMain(27);">div嵌入</a></dd>
            <dd><a href="javascript:switchMain(28);">iframe嵌入</a></dd>
        </dl>
    </li>
    <li th:if="${vo.domain != null && !#strings.isEmpty(vo.appId)}" class="layui-nav-item">
        <a href="javascript:;">模板管理</a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:switchMain(29);">div嵌入</a></dd>
            <dd><a href="javascript:switchMain(30);">iframe嵌入</a></dd>
        </dl>
    </li>

    <li th:if="${vo.sqlbotDomain != null && !#strings.isEmpty(vo.sqlbotAppId)}" class="layui-nav-item">
        <a href="javascript:switchMain(31);">SQLBot 嵌入</a>
    </li>
</ul>

<div class="main-div">
    <iframe id="main-iframe" class="main-iframe"></iframe>
</div>
<script>
    layui.use('element', function () {
        var element = layui.element;
        //监听导航点击
        element.on('nav(demo)', function (elem) {
            layer.msg(elem.text());
        });
    })
    var currentIndex = -1
    var linkArray = ['Setting', 'DashboardView', 'VisualizationView',
        'DashboardEditor', 'VisualizationEditor', 'view', 'ViewIframe',
        "DatasourceTree", "DatasetTree", "PanelTree", "ScreenTree",
        "DashboardViewIframe", "VisualizationViewIframe", "DashboardEditorIframe",
        "VisualizationEditorIframe", "", "", "DatasourceTreeIframe", "DatasetTreeIframe",
        "PanelTreeIframe", "ScreenTreeIframe",
        "DataFillingTree", "DataFillingTreeIframe", "DataFillingHandler", "DataFillingHandlerIframe",
        "DataFillingEditor", "DataFillingEditorIframe", "CopilotEditor", "CopilotEditorIframe", "TemplateManage", "TemplateManageIframe", "sqlbot"
    ]
    var switchMain = index => {
        if (currentIndex === index) return
        var url = linkArray[index] + '?=' + (new Date()).getTime()
        document.getElementById("main-iframe").src = url
        currentIndex = index
        var lightIndex = 0
        if (currentIndex === 21 || currentIndex === 22) {
            lightIndex = 10
        } else if (currentIndex === 23 || currentIndex === 24) {
            lightIndex = 11
        } else if (currentIndex === 25 || currentIndex === 26) {
            lightIndex = 12
        } else if (currentIndex === 27 || currentIndex === 28) {
            lightIndex = 13
        } else if (currentIndex === 29 || currentIndex === 30) {
            lightIndex = 14
        } else if (currentIndex === 31) {
            lightIndex = 12
        } else {
            lightIndex = currentIndex % 10
            if (currentIndex === 10 || currentIndex === 20) {
                lightIndex = 10
            }
            if (lightIndex > 5) {
                lightIndex--
            }
        }
        var e = document.getElementsByClassName('layui-nav-item')[lightIndex]
        if (e) {
            e.classList.add('layui-this')
        }
    }
    window.onload = () => {
        switchMain(0)

        window.addEventListener('message', event => {
            console.log("内部消息Div："+JSON.stringify(event.data))
            if (event.data?.eventName === 'de_inner_params') {
                console.log("内部消息Div："+JSON.stringify(event.data))
                alert('DataEase 内部消息Div：'+JSON.stringify(event.data))
            }

        })

    }

</script>

</body>
</html>
